.column-description {
  background: transparentize($gray-9, 0.1);
  width: 180px;
  color: white;
  font-size: 11px;
  border-radius: 8px;
  font-family: system-ui;
  white-space: normal;

  .tip-title {
    display: flex;
    justify-content: space-between;
    height: 22px;
    line-height: 22px;
    background: $gray-9;
    border-radius: 8px 8px 0 0;
    padding: 0 10px;
    text-align: center;

    p {
      margin: 0;
    }
    p:first-child {
      font-weight: bold;
    }
    p:last-child {
      font-style: italic;
    }
  }

  .tip-body {
    overflow-y: auto;
    max-height: 260px;
    word-wrap: break-word;
    padding: 0 10px;

    ul,
    ol {
      padding: 0 16px;
    }
  }

  .tip-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 0 0 8px 8px;

    a {
      text-decoration: underline;
      cursor: pointer;
      color: $blue-light;
    }
  }
}
